<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <ul class="user-info">
              <li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号: admin </div></li>
              <li><svg-icon icon-class="user1" /> 用户昵称: 管理员 </li>
              <li><svg-icon icon-class="dept" /> 所属部门: 研发部 </li>
              <li><svg-icon icon-class="phone" /> 手机号码: 18888888888</li>
              <li>
                <svg-icon icon-class="anq" /> 安全设置: <a @click="setupPasswordDialog()">修改密码</a>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
        <!--    用户资料    -->
        <el-card>
          <el-tabs >
            <el-tab-pane label="用户资料" name="first">
              <el-form style="margin-top: 10px;" size="small" label-width="65px">
                <el-form-item label="昵称" prop="nickName">
                  <el-input style="width: 35%" />
                  <span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input style="width: 35%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group style="width: 178px">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="">
                  <el-button size="mini" type="primary" >保存配置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!--    操作日志    -->
            <el-tab-pane label="操作日志" name="second">
              <el-table style="width: 100%;">
                <el-table-column prop="description" label="行为" />
                <el-table-column prop="requestIp" label="IP" />
                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
                <el-table-column prop="browser" label="浏览器" />
                <el-table-column prop="time" label="请求耗时" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
                    <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
                    <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  align="right"
                >
                  <template slot="header">
                    <div style="display:inline-block;float: right;cursor: pointer" >创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
                  </template>
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页组件-->
              <el-pagination

                style="margin-top: 8px;"

              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import SetupPassword from '../setup/SetupPassword'
  export default {
    name: 'center',
    components: {SetupPassword},

    methods: {
       //设置，修改密码
       setupPasswordDialog: function(){
              this.$router.push({ path: '/setup/SetupPassword' })
       }
    }
  }
</script>
<style rel="stylesheet/scss">

  /*.avatar {*/
  /*  width: 120px;*/
  /*  height: 120px;*/
  /*  border-radius: 50%;*/
  /*}*/

  /*.user-info {*/
  /*  padding-left: 0;*/
  /*  list-style: none;*/
  /*  li{*/
  /*    border-bottom: 1px solid #F0F3F4;*/
  /*    padding: 11px 0;*/
  /*    font-size: 13px;*/
  /*  }*/
  /*  .user-right {*/
  /*    float: right;*/
  /*    a{*/
  /*      color: #317EF3;*/
  /*    }*/
  /*  }*/
  /*}*/

  /*.app-container {*/
  /*  padding: 20px 20px 45px 20px;*/
  /*}*/

  /*.clearfix {*/
  /*  &:after {*/
  /*    visibility: hidden;*/
  /*    display: block;*/
  /*    font-size: 0;*/
  /*    content: " ";*/
  /*    clear: both;*/
  /*    height: 0;*/
  /*  }*/
  /*}*/
</style>
